<template>
  <div class="right-list">
    <!-- 面包屑 -->
    <el-row>
      <my-breadcrumb level1="权限管理" level2="权限列表"></my-breadcrumb>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-table :data="tableData" style="width: 100%" border height="550">
        <el-table-column type="index" label="#" width="60"></el-table-column>
        <el-table-column prop="id" label="权限ID" width="120"></el-table-column>
        <el-table-column prop="authName" label="权限名称" width="160">
        </el-table-column>
        <el-table-column prop="path" label="路径" width="160">
        </el-table-column>
        <el-table-column label="层级">
          <template slot-scope="scope">
            {{ scope.row.level | fmLevelToText }}
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import MyBreadcrumb from '@/components/MyBreadcrumb'

export default {
  components: {
    MyBreadcrumb,
  },
  data() {
    return {
      tableData: [],
    }
  },
  filters: {
    fmLevelToText(val) {
      const obj = {
        '0': '一级',
        '1': '二级',
        '2': '三级',
        '3': '四级',
      }
      return obj[val]
    },
  },
  created() {
    this.getRightListData()
  },
  computed: {},
  methods: {
    async getRightListData() {
      const {
        data: { data, meta },
      } = await this.$http.get('/rights/list')

      // console.log(data)
      if (meta.status === 200) {
        this.tableData = data
      } else {
        this.$message.warning(data.meta.msg)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.right-list {
  .el-row {
    padding: 5px 0;
  }
}
</style>
